<template>
    <div v-loading="loading" class="main-container">
        <div class="handle-bar">
            <div style="float: right;" v-if="!isEdit">
                <el-button @click.native="handleClick('edit')" type="primary">编辑</el-button>
                <el-button @click.native="handleClick('export')" type="primary">导出</el-button>
            </div>

            <div style="float: right;" v-if="isEdit">
                <el-button @click.native="handleClick('save')" type="primary">保存</el-button>
                <el-button @click.native="handleClick('cancel')" type="primary">取消</el-button>
            </div>
        </div>
        <div class="content">
            <el-table :data="list" id="task-set-table" :height="tableHeight" border header-align="center" align="center" :cell-style="cellStyle" highlight-current-row>
                <el-table-column v-for="(item, index) in fieldList" :key="index" :fixed="index==0" show-overflow-tooltip :prop="item.field" :width="listWidth" :label="item.name">
                    <template slot-scope="scope">
                        <div v-if="item.field === 'realname' || !isEdit" class="table-show-item">
                            {{scope.row[item.field]}}
                        </div>
                        <el-input v-else type="number" v-model="scope.row[item.field]" @input="handleInputEdit(scope)">
                        </el-input>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {
    userProductList,
    saveProductList
} from '@/api/systemManagement/SystemProduct'

export default {
    /** 产品提成 */
    name: 'task-set-product',
    components: {},
    data() {
        return {
            loading: false,
            tableHeight: document.documentElement.clientHeight - 225,
            tableWidth: document.documentElement.clientWidth,
            /** 编辑控制 */
            isEdit: false,
            // table
            list: [],
            fieldList: [],
            listWidth: 150 
        }
    },
    computed: {},
    mounted() {
        window.onresize = () => {
            this.tableHeight = document.documentElement.clientHeight - 225
            this.tableWidth = document.documentElement.clientWidth
        }
        this.getUserProductList()
    },
    methods: {
        /** 获取产品提成列表 */
        getUserProductList() {
            this.loading = true
            userProductList({})
                .then(res => {
                    var l = res.data.field.length
                    if (l * 150 < this.tableWidth ) {
                        this.listWidth = ''
                    } else {
                        this.listWidth = 150
                    }
                    this.fieldList = res.data.field
                    this.list = res.data.list
                    this.loading = false
                })
                .catch(() => {
                    this.loading = false
                })
        },
        handleInputEdit(scope) {
            var value = scope.row[scope.column.property]
                ? scope.row[scope.column.property]
                : '0.00'
            var newValue = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
            if (value !== newValue) {
                scope.row[scope.column.property] = newValue
                this.$set(this.list, scope.$index, scope.row)
            }
        },
        /** 顶部操作 */
        handleClick(type) {
            if (type == 'search') {
                this.getUserProductList()
            } else if (type == 'edit') {
                this.isEdit = true
            } else if (type == 'save') {
                this.loading = true
                var list = this.list
                saveProductList({
                    datalist: list
                })
                    .then(res => {
                        this.$message.success(res.data)
                        this.loading = false
                        this.isEdit = false
                        this.getUserProductList()
                    })
                    .catch(() => {
                        this.loading = false
                    })
            } else if (type == 'cancel') {
                this.getUserProductList()
                this.isEdit = false
            }
        },
        /** 通过回调控制style */
        cellStyle({ row, column, rowIndex, columnIndex }) {
            if (
                columnIndex == 0
            ) {
                return {
                    backgroundColor: '#E5F4FE',
                    textAlign: 'center'
                }
            } else {
                return { textAlign: 'center' }
            }
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.main-container {
    flex: 1;
    background-color: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}

.handle-bar {
    padding: 15px 20px 5px 20px;
    .el-date-editor {
        width: 130px;
        margin-right: 15px;
    }
    .el-cascader {
        width: 130px;
        margin-right: 15px;
    }
    .el-select {
        width: 120px;
        margin-right: 15px;
    }
}

.content {
    padding: 10px 20px;
    flex: 1;
    overflow-y: auto;
}
.content /deep/ .el-table {
    border: 1px solid #e6e6e6;
}

.tabs-bar {
    border-bottom: 1px solid #e6e6e6;
}
.el-tabs /deep/ .el-tabs__nav-wrap::after {
    display: none !important;
}
.el-tabs /deep/ .el-tabs__header {
    padding-left: 17px;
    height: 57px;
    margin-bottom: 0;
}
.el-tabs /deep/ .el-tabs__item {
    font-size: 13px;
    height: 57px;
    line-height: 57px;
}

.el-table /deep/ td {
    padding: 3px 0;
}
.el-table /deep/ th {
    text-align: center;
}

.table-show-item {
    height: 34px;
    line-height: 34px;
    text-align: center;
}
</style>
